<template>
  <el-button type="primary" @click="CreateTask" :disabled="createTastbt">
    <el-icon style="vertical-align: middle">
      <Plus/>
    </el-icon>
    <span style="vertical-align: middle">
        创建任务
    </span>
  </el-button>

  <el-dialog v-model="formVisible" :close-on-click-modal="false" :width="'48%'" title="任务" @close="closeForm">

    <el-form ref="formRef" :model="state.formData" :rules="formRules" class="custom-form" label-position="left"
             label-width="150px" @submit.native.prevent>
      <!-- 任务类型 -->
      <el-form-item class="fullwidth" label="任务类型" prop="frwlx">
        <el-radio-group v-model="state.formData.frwlx">
          <el-radio :label="1">AI外呼</el-radio>
          <el-radio :label="2">语音通知</el-radio>
        </el-radio-group>
      </el-form-item>

      <!--     AI话术模板 -->
      <div>
        <template v-if="state.formData.frwlx === 1">
          <!-- 任务名称-->
          <el-form-item label="任务名称" prop="frwmc">
            <el-input v-model="state.formData.frwmc"></el-input>
          </el-form-item>

          <!-- 话术模板-->
          <el-form-item label="AI话术模板" prop="fhsmblx">
            <el-radio-group v-model="state.formData.fhsmblx" class="fullwidth">
              <el-radio :label="1">单模板</el-radio>
              <el-radio :label="2">智能话术策略模板</el-radio>
            </el-radio-group>
            <el-select v-model="state.formData.fhsmbid" class="partwidth" placeholder="请选择"
                       @visible-change="fetchTemplates">
              <el-option
                  v-for="item in templates"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <!-- 并发数 -->
          <el-form-item label="并发数" prop="frwbfs">
            <el-input v-model="state.formData.frwbfs"></el-input>
          </el-form-item>

          <!-- 优先任务 -->
          <el-form-item class="fullwidth" label="优先任务" prop="frwyx">
            <el-radio-group v-model="state.formData.frwyx">
              <el-radio :label="1">否</el-radio>
              <el-radio :label="2" style="margin-right: 10px">是</el-radio>
            </el-radio-group>
            <el-popover placement="top-start" effect="dark" :width="300" trigger="hover"
                        content="如设定为优先任务，导入号码后会优先将非优先任务的并发数也分配至该任务进行外呼。如多个优先任务，会按设置的并发数比例进行分配。">
              <template #reference>
                <el-icon>
                  <QuestionFilled/>
                </el-icon>
              </template>
            </el-popover>
          </el-form-item>

          <!-- 启动方式 -->
          <el-form-item class="fullwidth" label="启动方式" prop="frwqdfs">
            <el-radio-group v-model="state.formData.frwqdfs">
              <el-radio-button :label="0">立即启动</el-radio-button>
              <el-radio-button :label="1" style="margin-right: 10px">定时启动</el-radio-button>
            </el-radio-group>
            <el-popover placement="top-start" effect="dark" :width="300" trigger="hover"
                        content="选择定时启动，系统自动根据设定的时间启动任务。选择立即启动，则任务创建成功会立即启动。">
              <template #reference>
                <el-icon>
                  <QuestionFilled/>
                </el-icon>
              </template>
            </el-popover>
          </el-form-item>

<!--          <el-form-item v-if="state.formData.frwqdfs === 1" class="fullwidth" label="启动时间" prop="frwksrq">-->
<!--            <el-date-picker v-model="state.formData.frwksrq" :disabled-date="disabledDate" placeholder="请选择启动日期"-->
<!--                            type="date"></el-date-picker>-->
<!--          </el-form-item>-->

          <el-form-item v-if="state.formData.frwqdfs === 1" class="fullwidth" label="启动时间">
            <el-date-picker
              v-model="datetimeValue"
              :disabled-date="disabledDate"
              placeholder="请选择启动时间"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>

          <!-- 外呼时间 -->
          <el-form-item label="外呼时间" prop="frwwhweek">
            <el-checkbox-group v-model="state.formData.frwwhweek" class="fullwidth">
              <el-checkbox :label="1">周一</el-checkbox>
              <el-checkbox :label="2">周二</el-checkbox>
              <el-checkbox :label="3">周三</el-checkbox>
              <el-checkbox :label="4">周四</el-checkbox>
              <el-checkbox :label="5">周五</el-checkbox>
              <el-checkbox :label="6">周六</el-checkbox>
              <el-checkbox :label="7">周日</el-checkbox>
            </el-checkbox-group>
            <div>
              <div v-for="(timeRange, index) in timeRanges" :key="index" class="slider-demo-block">
                <el-slider v-model="timeRange.value" :format-tooltip="formatTime" :max="48" range show-stops/>
                <span>{{ formatTime(timeRange.value[0]) }}</span>
                <span>-</span>
                <span>{{ formatTime(timeRange.value[1]) }}</span>
                <span v-if="index === 0" style="margin-left: 5px;margin-bottom:8px;font-size: 25px"
                      @click="addTimeRange">+</span>
                <span v-if="index > 0" style="margin-left: 8px;margin-bottom:6px;font-size: 30px"
                      @click="deleteTimeRange(index)">-</span>
              </div>
            </div>
          </el-form-item>

          <!-- 未接重呼 -->
          <el-form-item class="fullwidth" label="未接重呼" prop="fwjch">
            <el-switch
                v-model="state.formData.fwjch"
                :active-value="1"
                :inactive-value="0"
                style="margin-right: 10px"
            />
            <el-popover placement="top-start"  effect="dark" :width="400" trigger="hover"
                        content="针对当天外呼后未接听、占线、拒接、挂机、无法接通、用户欠费、线路故障、呼叫失败状态的号码，
                                 会按以下规则重呼： 间隔重呼：按设定的间隔重呼，直至接通或达到设定的重呼次数后不再重呼：定
                                 时重呼：到达设定的时间后自动重呼，直至接通或达到最设定的最后重呼时间后不再重呼。
                                 注：只在当天对当天相应状态号码重呼">
              <template #reference>
                <el-icon>
                  <QuestionFilled />
                </el-icon>
              </template>
            </el-popover>

            <div v-if="state.formData.fwjch === 1">
              <div v-for="(condition, index) in wjch" :key="index"
                   class="fullwidth" style="background-color: #f2f2f2; margin-top: 10px; padding: 10px;">
                <div style="display: flex; justify-content: space-between; background-color: #ffffff">
                  <span style="margin-left: 10px">
                    <span style="color: rgb(238,135,138);">*</span>
                    条件 {{ index + 1 }}
                  </span>
                  <div>
                    <span v-if="index > 0" link style="color: rgba(218,40,40,0.94);margin-right: 10px"
                          @click="removeCondition(index)"> - 删除条件</span>
                    <span v-if="index === 0" link style="color: rgb(45,147,252);margin-right: 10px"
                          @click="addCondition"> + 添加条件</span>
                  </div>
                </div>
                <el-checkbox-group v-model="condition.checkedOptions">
                  <el-checkbox
                      v-for="option in wjchoptions"
                      :key="option"
                      :disabled="isOptionDisabled(option, index)"
                      :label="option"
                  ></el-checkbox>
                </el-checkbox-group>
                <div v-for="(repeatRule,ruleIndex) in condition.repeatRules" :key="ruleIndex">
                  <div style="display: flex;">
                    <span style="width: 100px">第{{ ruleIndex + 1 }}次重呼</span>
                    <el-select v-model="repeatRule.repeatType" placeholder="请选择方式" style="width: 150px">
                      <el-option label="间隔" value="interval"></el-option>
                      <el-option label="定时" value="timing"></el-option>
                    </el-select>
                    <div v-if="repeatRule.repeatType === 'interval'">
                      <el-input v-model="repeatRule.interval" placeholder="请输入" style="width: 130px;margin-left: 5px;">
                        <template #suffix>
                          <span style="margin-left: 5px;">分钟</span>
                        </template>
                      </el-input>
                      后
                    </div>
                    <el-time-select
                        v-if="repeatRule.repeatType === 'timing'"
                        v-model="repeatRule.timing"
                        start="00:00"
                        step="00:30"
                        end="23:30"
                        placeholder="请选择"
                        style="width: 150px;margin-left: 5px"
                    />


                    <el-button v-if="ruleIndex > 0" style="margin-left: 5px"
                               @click="removeRepeatRule(condition, ruleIndex)">-
                    </el-button>
                    <el-button v-if="ruleIndex === 0" style="margin-left: 5px" @click="addRepeatRule(condition)">+
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>

          <!-- 接通重呼 -->
          <el-form-item class="fullwidth" label="接通重呼" prop="fjtch">
            <el-radio-group v-model="state.formData.fjtch">
              <el-radio :label="1">不重呼</el-radio>
              <el-radio :label="2">间隔重呼</el-radio>
              <el-radio :label="3" style="margin-right: 10px">定时重呼</el-radio>
            </el-radio-group>
            <el-popover placement="top-start"  effect="dark" :width="400" trigger="hover"
                        content="已接通，但用户无回复或用户所有回复都无法识别时，视为无效接通。
                                 如设定重呼，会将无效接通号码自动导入1条新数据进行外呼，计费。">
              <template #reference>
                <el-icon>
                  <QuestionFilled />
                </el-icon>
              </template>
            </el-popover>

            <div v-if="state.formData.fjtch === 2">
              <div style="margin-left: 10px;display: inline-block">
                <span style="color: rgb(238,135,138);">*</span> 重呼条件
                <el-checkbox-group v-model="ch.checkedOptions">
                  <el-checkbox
                      v-for="option in choptions"
                      :key="option"
                      :label="option"
                  >
                  </el-checkbox>
                </el-checkbox-group>
              </div>

              <el-form ref="chFormRef" :model="ch" :rules="chFormRules" label-width="150px">
                <div>
                  <el-form-item label="重呼间隔" prop="interval" style="margin-left: 10px">
                    <el-input v-model="ch.interval" style="width: 100px;margin-left: -80px;margin-right: 5px"></el-input>分钟
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="重呼次数" prop="times" style="margin-left: 10px">
                    <el-input v-model="ch.times" style="width: 100px;margin-left: -80px"></el-input>
                  </el-form-item>
                </div>
              </el-form>
            </div>


            <div v-if="state.formData.fjtch === 3">
              <div style="margin-left: 10px;display: inline-block">
                <span style="color: rgb(238,135,138);">*</span> 重呼条件

                <el-checkbox-group v-model="ch.checkedOptions">
                  <el-checkbox
                      v-for="option in choptions"
                      :key="option"
                      :label="option"
                  >
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <div>
                <span style="margin-left: 10px">
                  <span style="color: rgb(238,135,138);">*</span> 重呼时间
                    <el-time-select
                        v-model="ch.timing"
                        start="00:00"
                        step="00:30"
                        end="23:30"
                        placeholder="请选择"
                        style="width: 150px;margin-left: 10px"
                    />
                </span>
              </div>
            </div>

          </el-form-item>

          <!-- 发送挂机短信 -->
          <el-form-item class="fullwidth" label="发送挂机短信" prop="fgjdx">
            <el-radio-group v-model="state.formData.fgjdx">
              <el-radio :label="1">不发送</el-radio>
              <el-radio :label="2">普通挂机短信</el-radio>
              <el-radio :label="3">交互挂机短信</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-if="state.formData.fgjdx === 2">
            <el-form-item label="失败重发" prop="sbcf">
              <el-radio-group v-model="gjdx.wjch">
                <el-radio :label="1">否</el-radio>
                <el-radio :label="2">是</el-radio>
              </el-radio-group>
            </el-form-item>
            <div v-if=" gjdx.wjch === 1" style="margin-left: 80px">
              <div v-for="(task,index) in gjdx.tasks" :key="index">
                <div>
                  <span style="margin-left: 10px">
                  <span style="color: rgb(238,135,138);">*</span>
                  短信模板 {{ index + 1 }}
                  </span>
                  <el-select v-model="task.dxmb" placeholder="请选择短信模板" style="margin-left: 10px"
                             @visible-change="fetchSms">
                    <el-option
                        v-for="item in sms"
                        :key="item.fid"
                        :label="item.fmbmc"
                        :value="item.fid">
                    </el-option>
                  </el-select>
                  <el-button v-if="index === 0" type="primary" @click="addSms">添加模板</el-button>
                  <el-button v-if="index > 0" type="danger" @click="removeSms">删除模板</el-button>
                  <div v-for="(condition,conditionIndex) in task.conditions" style="margin-top: 10px">
                    <span style="margin-left: 10px">
                    <span style="color: rgb(238,135,138);">*</span>
                    条件 {{ conditionIndex + 1 }}
                    </span>
                    <el-button v-if="conditionIndex === 0" style="margin-left: 20px;margin-bottom: 6px"
                               @click="addCon(task)"> + 添加条件
                    </el-button>
                    <el-button v-if="conditionIndex > 0" style="margin-left: 20px;margin-bottom: 6px"
                               @click="removeCon(task,conditionIndex)"> - 删除条件
                    </el-button>

                    <div style="display: flex; flex-direction: column; align-items: flex-start;">
                      <div v-for="(label,labelIndex) in condition.labels"
                           class="linked-label"
                           style="margin-left: 80px;display: flex; align-items: center;">
                        <el-select v-model="label.type" placeholder="请选择" style="width: 115px;">
                          <el-option label="意向标签" value="yxbq"></el-option>
                          <el-option label="个性标签" value="gxbq"></el-option>
                          <el-option label="回复关键词" value="hfgjc"></el-option>
                          <el-option label="通话时长" value="thsc"></el-option>
                          <el-option label="外呼次数" value="whcs"></el-option>
                        </el-select>
                        <span v-if="label.type === 'yxbq'">
                        <el-checkbox-group v-model="label.yxbq">
                          <el-checkbox-button
                              v-for="option in intentionOptions"
                              :key="option"
                              :label="option">
                          </el-checkbox-button>
                        </el-checkbox-group>
                      </span>
                        <span v-if="label.type === 'gxbq'">
                        <el-select v-model="label.gxbq" placeholder="请选择"
                                   @visible-change="fetchTemplates">
                          <el-option
                              v-for="item in templates"
                              :key="item.fid"
                              :label="item.name"
                              :value="item.fid">
                          </el-option>
                        </el-select>
                      </span>
                        <span v-if="label.type === 'hfgjc'">
                         <el-input
                             v-model="label.hfgjc"
                             :maxlength="2000"
                             :rows="3"
                             :show-word-limit="true"
                             placeholder="输入关键词，多个关键词使用#分割，最多可输入2000字"
                             style="width: 300px"
                             type="textarea"
                         />
                      </span>
                        <span v-if="label.type === 'thsc'">
                          <el-select v-model="label.thsc.dx" placeholder="请选择" style="width: 100px">
                            <el-option label="<=" value="<="></el-option>
                            <el-option label=">=" value=">="></el-option>
                          </el-select>
                          <el-input-number v-model="label.thsc.time" :min="0"></el-input-number>
                          <span style="color: #0080ff"> 秒</span>
                      </span>
                        <span v-if="label.type === 'whcs'">
                          <span style="color: #0080ff;margin-left: 5px;margin-right: 5px"> 等于第</span>
                          <el-input-number v-model="label.whcs" :min="0"></el-input-number>
                          <span style="color: #0080ff;margin-left: 5px"> 次</span>
                      </span>
                        <span v-if="labelIndex === 0" style="margin-left: 5px;font-size: 20px"
                              @click="addlabel(condition)">+</span>
                        <span v-if="labelIndex > 0" style="margin-left: 5px;font-size: 20px"
                              @click="removelabel(condition,labelIndex)">-</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if=" gjdx.wjch === 2">
              <span style="color: rgb(238,135,138);">*</span>
              <el-select
                  v-model="state.fssb"
                  multiple
                  placeholder="请选择"
                  style="width: 240px;margin-left: 80px"
              >
                <el-option
                    v-for="item in fssb"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
              <div v-for="(task,index) in gjdx.tasks" :key="index" style="margin-left: 80px">
                <div>
                  <span style="margin-left: 10px">
                  <span style="color: rgb(238,135,138);">*</span>
                  短信模板 {{ index + 1 }}
                  </span>
                  <el-select v-model="task.dxmb" placeholder="请选择短信模板" style="margin-left: 10px"
                             @visible-change="fetchSms">
                    <el-option
                        v-for="item in sms"
                        :key="item.fid"
                        :label="item.fmbmc"
                        :value="item.fid">
                    </el-option>
                  </el-select>
                  <el-button v-if="index === 0" type="primary" @click="addSms">添加模板</el-button>
                  <el-button v-if="index > 0" type="danger" @click="removeSms">删除模板</el-button>
                  <div v-for="(condition,conditionIndex) in task.conditions" style="margin-top: 10px">
                    <span style="margin-left: 10px">
                    <span style="color: rgb(238,135,138);">*</span>
                    条件 {{ conditionIndex + 1 }}
                    </span>
                    <el-button v-if="conditionIndex === 0" style="margin-left: 20px;margin-bottom: 6px"
                               @click="addCon(task)"> + 添加条件
                    </el-button>
                    <el-button v-if="conditionIndex > 0" style="margin-left: 20px;margin-bottom: 6px"
                               @click="removeCon(task,conditionIndex)"> - 删除条件
                    </el-button>

                    <div style="display: flex; flex-direction: column; align-items: flex-start;">
                      <div v-for="(label,labelIndex) in condition.labels"
                           class="linked-label"
                           style="margin-left: 80px;display: flex; align-items: center;">
                        <el-select v-model="label.type" placeholder="请选择" style="width: 115px;">
                          <el-option label="意向标签" value="yxbq"></el-option>
                          <el-option label="个性标签" value="gxbq"></el-option>
                          <el-option label="回复关键词" value="hfgjc"></el-option>
                          <el-option label="通话时长" value="thsc"></el-option>
                          <el-option label="外呼次数" value="whcs"></el-option>
                        </el-select>
                        <span v-if="label.type === 'yxbq'">
                        <el-checkbox-group v-model="label.yxbq">
                          <el-checkbox-button
                              v-for="option in intentionOptions"
                              :key="option"
                              :label="option">
                          </el-checkbox-button>
                        </el-checkbox-group>
                      </span>
                        <span v-if="label.type === 'gxbq'">
                        <el-select v-model="label.gxbq" placeholder="请选择"
                                   @visible-change="fetchTemplates">
                          <el-option
                              v-for="item in templates"
                              :key="item.fid"
                              :label="item.name"
                              :value="item.fid">
                          </el-option>
                        </el-select>
                      </span>
                        <span v-if="label.type === 'hfgjc'">
                         <el-input
                             v-model="label.hfgjc"
                             :maxlength="2000"
                             :rows="3"
                             :show-word-limit="true"
                             placeholder="输入关键词，多个关键词使用#分割，最多可输入2000字"
                             style="width: 300px"
                             type="textarea"
                         />
                      </span>
                        <span v-if="label.type === 'thsc'">
                          <el-select v-model="label.thsc.dx" placeholder="请选择" style="width: 100px">
                            <el-option label="<=" value="<="></el-option>
                            <el-option label=">=" value=">="></el-option>
                          </el-select>
                          <el-input-number v-model="label.thsc.time" :min="0"></el-input-number>
                          <span style="color: #0080ff"> 秒</span>
                      </span>
                        <span v-if="label.type === 'whcs'">
                          <span style="color: #0080ff;margin-left: 5px;margin-right: 5px"> 等于第</span>
                          <el-input-number v-model="label.whcs" :min="0"></el-input-number>
                          <span style="color: #0080ff;margin-left: 5px"> 次</span>
                      </span>
                        <span v-if="labelIndex === 0" style="margin-left: 5px;font-size: 20px"
                              @click="addlabel(condition)">+</span>
                        <span v-if="labelIndex > 0" style="margin-left: 5px;font-size: 20px"
                              @click="removelabel(condition,labelIndex)">-</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="state.formData.fgjdx === 3">
            <el-form-item label="失败重发" prop="sbcf">
              <el-radio-group v-model="gjdx.wjch">
                <el-radio :label="1">否</el-radio>
                <el-radio :label="2">是</el-radio>
              </el-radio-group>
            </el-form-item>
            <div v-if=" gjdx.wjch === 1" style="margin-left: 80px">
              <div v-for="(task,index) in gjdx.tasks" :key="index">
                <div>
                  <span style="margin-left: 10px">
                  <span style="color: rgb(238,135,138);">*</span>
                  短信任务 {{ index + 1 }}
                  </span>
                  <el-select v-model="task.dxmb" placeholder="请选择短信任务" style="margin-left: 10px"
                             @visible-change="fetchSms">
                    <el-option
                        v-for="item in sms"
                        :key="item.fid"
                        :label="item.fmbmc"
                        :value="item.fid">
                    </el-option>
                  </el-select>
                  <el-button v-if="index === 0" type="primary" @click="addSms">添加模板</el-button>
                  <el-button v-if="index > 0" type="danger" @click="removeSms">删除模板</el-button>
                  <div v-for="(condition,conditionIndex) in task.conditions" style="margin-top: 10px">
                    <span style="margin-left: 10px">
                    <span style="color: rgb(238,135,138);">*</span>
                    条件 {{ conditionIndex + 1 }}
                    </span>
                    <el-button v-if="conditionIndex === 0" style="margin-left: 20px;margin-bottom: 6px"
                               @click="addCon(task)"> + 添加条件
                    </el-button>
                    <el-button v-if="conditionIndex > 0" style="margin-left: 20px;margin-bottom: 6px"
                               @click="removeCon(task,conditionIndex)"> - 删除条件
                    </el-button>

                    <div style="display: flex; flex-direction: column; align-items: flex-start;">
                      <div v-for="(label,labelIndex) in condition.labels"
                           class="linked-label"
                           style="margin-left: 80px;display: flex; align-items: center;">
                        <el-select v-model="label.type" placeholder="请选择" style="width: 115px;">
                          <el-option label="意向标签" value="yxbq"></el-option>
                          <el-option label="个性标签" value="gxbq"></el-option>
                          <el-option label="回复关键词" value="hfgjc"></el-option>
                          <el-option label="通话时长" value="thsc"></el-option>
                          <el-option label="外呼次数" value="whcs"></el-option>
                        </el-select>
                        <span v-if="label.type === 'yxbq'">
                        <el-checkbox-group v-model="label.yxbq">
                          <el-checkbox-button
                              v-for="option in intentionOptions"
                              :key="option"
                              :label="option">
                          </el-checkbox-button>
                        </el-checkbox-group>
                      </span>
                        <span v-if="label.type === 'gxbq'">
                        <el-select v-model="label.gxbq" placeholder="请选择"
                                   @visible-change="fetchTemplates">
                          <el-option
                              v-for="item in templates"
                              :key="item.fid"
                              :label="item.name"
                              :value="item.fid">
                          </el-option>
                        </el-select>
                      </span>
                        <span v-if="label.type === 'hfgjc'">
                         <el-input
                             v-model="label.hfgjc"
                             :maxlength="2000"
                             :rows="3"
                             :show-word-limit="true"
                             placeholder="输入关键词，多个关键词使用#分割，最多可输入2000字"
                             style="width: 300px"
                             type="textarea"
                         />
                      </span>
                        <span v-if="label.type === 'thsc'">
                          <el-select v-model="label.thsc.dx" placeholder="请选择" style="width: 100px">
                            <el-option label="<=" value="<="></el-option>
                            <el-option label=">=" value=">="></el-option>
                          </el-select>
                          <el-input-number v-model="label.thsc.time" :min="0"></el-input-number>
                          <span style="color: #0080ff"> 秒</span>
                      </span>
                        <span v-if="label.type === 'whcs'">
                          <span style="color: #0080ff;margin-left: 5px;margin-right: 5px"> 等于第</span>
                          <el-input-number v-model="label.whcs" :min="0"></el-input-number>
                          <span style="color: #0080ff;margin-left: 5px"> 次</span>
                      </span>
                        <span v-if="labelIndex === 0" style="margin-left: 5px;font-size: 20px"
                              @click="addlabel(condition)">+</span>
                        <span v-if="labelIndex > 0" style="margin-left: 5px;font-size: 20px"
                              @click="removelabel(condition,labelIndex)">-</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if=" gjdx.wjch === 2">
              <span style="color: rgb(238,135,138);">*</span>
              <el-select
                  v-model="state.fssb"
                  multiple
                  placeholder="请选择"
                  style="width: 240px;margin-left: 80px"
              >
                <el-option
                    v-for="item in fssb"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
              <div v-for="(task,index) in gjdx.tasks" :key="index" style="margin-left: 80px">
                <div>
                  <span style="margin-left: 10px">
                  <span style="color: rgb(238,135,138);">*</span>
                  短信任务 {{ index + 1 }}
                  </span>
                  <el-select v-model="task.dxmb" placeholder="请选择短信任务" style="margin-left: 10px"
                             @visible-change="fetchSms">
                    <el-option
                        v-for="item in sms"
                        :key="item.fid"
                        :label="item.fmbmc"
                        :value="item.fid">
                    </el-option>
                  </el-select>
                  <el-button v-if="index === 0" type="primary" @click="addSms">添加模板</el-button>
                  <el-button v-if="index > 0" type="danger" @click="removeSms">删除模板</el-button>
                  <div v-for="(condition,conditionIndex) in task.conditions" style="margin-top: 10px">
                    <span style="margin-left: 10px">
                    <span style="color: rgb(238,135,138);">*</span>
                    条件 {{ conditionIndex + 1 }}
                    </span>
                    <el-button v-if="conditionIndex === 0" style="margin-left: 20px;margin-bottom: 6px"
                               @click="addCon(task)"> + 添加条件
                    </el-button>
                    <el-button v-if="conditionIndex > 0" style="margin-left: 20px;margin-bottom: 6px"
                               @click="removeCon(task,conditionIndex)"> - 删除条件
                    </el-button>

                    <div style="display: flex; flex-direction: column; align-items: flex-start;">
                      <div v-for="(label,labelIndex) in condition.labels"
                           class="linked-label"
                           style="margin-left: 80px;display: flex; align-items: center;">
                        <el-select v-model="label.type" placeholder="请选择" style="width: 115px;">
                          <el-option label="意向标签" value="yxbq"></el-option>
                          <el-option label="个性标签" value="gxbq"></el-option>
                          <el-option label="回复关键词" value="hfgjc"></el-option>
                          <el-option label="通话时长" value="thsc"></el-option>
                          <el-option label="外呼次数" value="whcs"></el-option>
                        </el-select>
                        <span v-if="label.type === 'yxbq'">
                        <el-checkbox-group v-model="label.yxbq">
                          <el-checkbox-button
                              v-for="option in intentionOptions"
                              :key="option"
                              :label="option">
                          </el-checkbox-button>
                        </el-checkbox-group>
                      </span>
                        <span v-if="label.type === 'gxbq'">
                        <el-select v-model="label.gxbq" placeholder="请选择"
                                   @visible-change="fetchTemplates">
                          <el-option
                              v-for="item in templates"
                              :key="item.fid"
                              :label="item.name"
                              :value="item.fid">
                          </el-option>
                        </el-select>
                      </span>
                        <span v-if="label.type === 'hfgjc'">
                         <el-input
                             v-model="label.hfgjc"
                             :maxlength="2000"
                             :rows="3"
                             :show-word-limit="true"
                             placeholder="输入关键词，多个关键词使用#分割，最多可输入2000字"
                             style="width: 300px"
                             type="textarea"
                         />
                      </span>
                        <span v-if="label.type === 'thsc'">
                          <el-select v-model="label.thsc.dx" placeholder="请选择" style="width: 100px">
                            <el-option label="<=" value="<="></el-option>
                            <el-option label=">=" value=">="></el-option>
                          </el-select>
                          <el-input-number v-model="label.thsc.time" :min="0"></el-input-number>
                          <span style="color: #0080ff"> 秒</span>
                      </span>
                        <span v-if="label.type === 'whcs'">
                          <span style="color: #0080ff;margin-left: 5px;margin-right: 5px"> 等于第</span>
                          <el-input-number v-model="label.whcs" :min="0"></el-input-number>
                          <span style="color: #0080ff;margin-left: 5px"> 次</span>
                      </span>
                        <span v-if="labelIndex === 0" style="margin-left: 5px;font-size: 20px"
                              @click="addlabel(condition)">+</span>
                        <span v-if="labelIndex > 0" style="margin-left: 5px;font-size: 20px"
                              @click="removelabel(condition,labelIndex)">-</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 分配客户加微 -->
          <el-form-item class="fullwidth" label="分配客户加微" prop="ffpkhwx">
            <el-radio-group v-model="state.formData.ffpkhwx">
              <el-radio :label="0">不分配</el-radio>
              <el-radio :label="1">分配</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-if="state.formData.ffpkhwx === 1" style="margin-left: 80px">
            <span style="margin-left: 15px;margin-right: 20px">
              <span style="color: rgb(238,135,138);">*</span>
              <span style="margin-left: 5px">选择分配</span>
            </span>
            <el-checkbox v-model="khjw.allocation.personal" label="分配至个人微信" size="large"/>
            <el-checkbox v-model="khjw.allocation.TP" label="分配至第三方" size="large"/>

            <div v-for="(rule,index) in khjw.allocationRule" :key="index">
              <div>
                <div v-if="khjw.allocation.personal === true">
                  <span style="margin-left: 10px">
                  <span style="color: rgb(238,135,138);">*</span>
                    选择员工
                  </span>
                  <el-select v-model="rule.staff" placeholder="请选择员工" style="margin-left: 10px"
                             @visible-change="fetchStaff">
                    <el-option
                        v-for="item in staff"
                        :key="item.fid"
                        :label="item.fyhm"
                        :value="item.fid">
                    </el-option>
                  </el-select>
                  <el-button v-if="index === 0" type="primary" @click="addRule">添加分配规则</el-button>
                  <el-button v-if="index > 0" type="danger" @click="removeRule">删除分配规则</el-button>
                </div>


                <div v-for="(condition,conditionIndex) in rule.conditions" style="margin-top: 10px">
                    <span style="margin-left: 10px">
                    <span style="color: rgb(238,135,138);">*</span>
                    条件 {{ conditionIndex + 1 }}
                    </span>
                  <el-button v-if="conditionIndex === 0" style="margin-left: 20px;margin-bottom: 6px"
                             @click="addCon(rule)"> + 添加条件
                  </el-button>
                  <el-button v-if="conditionIndex > 0" style="margin-left: 20px;margin-bottom: 6px"
                             @click="removeCon(rule,conditionIndex)"> - 删除条件
                  </el-button>

                  <div style="display: flex; flex-direction: column; align-items: flex-start;">
                    <div v-for="(label,labelIndex) in condition.labels"
                         class="linked-label"
                         style="margin-left: 80px;display: flex; align-items: center;">
                      <el-select v-model="label.type" placeholder="请选择" style="width: 115px;">
                        <el-option label="意向标签" value="yxbq"></el-option>
                        <el-option label="个性标签" value="gxbq"></el-option>
                        <el-option label="回复关键词" value="hfgjc"></el-option>
                        <el-option label="通话时长" value="thsc"></el-option>
                        <el-option label="外呼次数" value="whcs"></el-option>
                      </el-select>
                      <span v-if="label.type === 'yxbq'">
                        <el-checkbox-group v-model="label.yxbq">
                          <el-checkbox-button
                              v-for="option in intentionOptions"
                              :key="option"
                              :label="option">
                          </el-checkbox-button>
                        </el-checkbox-group>
                      </span>
                      <span v-if="label.type === 'gxbq'">
                        <el-select v-model="label.gxbq" placeholder="请选择"
                                   @visible-change="fetchTemplates">
                          <el-option
                              v-for="item in templates"
                              :key="item.fid"
                              :label="item.name"
                              :value="item.fid">
                          </el-option>
                        </el-select>
                      </span>
                      <span v-if="label.type === 'hfgjc'">
                         <el-input
                             v-model="label.hfgjc"
                             :maxlength="2000"
                             :rows="3"
                             :show-word-limit="true"
                             placeholder="输入关键词，多个关键词使用#分割，最多可输入2000字"
                             style="width: 300px"
                             type="textarea"
                         />
                      </span>
                      <span v-if="label.type === 'thsc'">
                          <el-select v-model="label.thsc.dx" placeholder="请选择" style="width: 100px">
                            <el-option label="<=" value="<="></el-option>
                            <el-option label=">=" value=">="></el-option>
                          </el-select>
                          <el-input-number v-model="label.thsc.time" :min="0"></el-input-number>
                          <span style="color: #0080ff"> 秒</span>
                      </span>
                      <span v-if="label.type === 'whcs'">
                          <span style="color: #0080ff;margin-left: 5px;margin-right: 5px"> 等于第</span>
                          <el-input-number v-model="label.whcs" :min="0"></el-input-number>
                          <span style="color: #0080ff;margin-left: 5px"> 次</span>
                      </span>
                      <span v-if="labelIndex === 0" style="margin-left: 5px;font-size: 20px"
                            @click="addlabel(condition)">+</span>
                      <span v-if="labelIndex > 0" style="margin-left: 5px;font-size: 20px"
                            @click="removelabel(condition,labelIndex)">-</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>


          </div>


          <!-- 接通转接类型 -->
          <el-form-item class="fullwidth" label="接通转接类型" prop="fjtzjlx">
            <el-radio-group v-model="state.formData.fjtzjlx" @change="handleChange">
              <el-radio :label="0">不转人工</el-radio>
              <el-radio :label="1">接通转人工</el-radio>
              <el-radio :label="2" style="margin-right: 10px">智能转人工</el-radio>
            </el-radio-group>
            <el-popover placement="top-start"  effect="dark" :width="400" trigger="hover"
                        content="设定后，如在话术模板中有设定转人工设置，即会转到设定的人工坐席组继续与客户对话">
              <template #reference>
                <el-icon>
                  <question-filled />
                </el-icon>
              </template>
            </el-popover>
          </el-form-item>

          <!-- 优先外呼 -->
          <el-form-item class="fullwidth" label="优先外呼" prop="fyxwh">
            <el-radio-group v-model="state.formData.fyxwh">
              <el-radio :label="1">先导入</el-radio>
              <el-radio :label="2">后导入</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 外呼排序方式 -->
          <el-form-item class="fullwidth" label="外呼排序方式" prop="fyxwh">
            <el-radio-group v-model="state.formData.fwhpxfs">
              <el-radio :label="1">优先首呼数据</el-radio>
              <el-radio :label="2">优先重呼数据</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 回调地址 -->
          <el-form-item class="fullwidth" label="外显规则" prop="fwxgz">
            <el-radio-group v-model="state.formData.fwxgz">
              <el-radio :label="1">轮流外显</el-radio>
              <el-radio :label="2">随机外显</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 号码隐藏方式 -->
          <el-form-item class="fullwidth" label="号码隐藏方式" prop="fhmycfs">
            <el-radio-group v-model="state.formData.fhmycfs">
              <el-radio :label="1">不隐藏</el-radio>
              <el-radio :label="2">隐藏中间四位</el-radio>
              <el-radio :label="3">隐藏后面四位</el-radio>
            </el-radio-group>
          </el-form-item>

          <!--回调地址 -->
          <el-form-item class="fullwidth" label="回调地址" prop="frwhdjk">
            <el-input v-model="state.formData.frwhdjk" class="partwidth"></el-input>
          </el-form-item>

          <!-- 通话节点回调 -->
          <el-form-item class="fullwidth" label="通话节点回调" prop="fthjdhdjk">
            <el-input v-model="state.formData.fthjdhdjk" class="partwidth"></el-input>
          </el-form-item>

          <!-- 挂机短信回调接口 -->
          <el-form-item class="fullwidth" label="挂机短信回调接口" prop="fgzdxhdjk">
            <el-input v-model="state.formData.fgzdxhdjk" class="partwidth"></el-input>
          </el-form-item>
        </template>
      </div>


      <!--      语言通知-->
      <div>
        <template v-if="state.formData.frwlx === 2">
          <!--任务名称-->
          <el-form-item label="任务名称" prop="frwmc">
            <el-input v-model="state.formData.frwmc"></el-input>
          </el-form-item>

          <!-- 话术模板 -->
          <el-form-item label="AI话术模板" prop="fhsmbid">
            <el-select v-model="state.formData.fhsmbid" placeholder="请选择" style="width: 50%"
                       @visible-change="fetchTemplates">
              <el-option
                  v-for="item in templates"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <!-- 录音播放次数 -->
          <el-form-item label="录音播放次数" prop="flybfcs">
            <el-input v-model="state.formData.flybfcs"></el-input>
          </el-form-item>


          <!-- 播放间隔时长 -->
          <el-form-item label="播放间隔时长" prop="fbfjgsc">
            <el-input v-model="state.formData.fbfjgsc">
              <template #append>秒</template>
            </el-input>
          </el-form-item>

          <!-- 并发数 -->
          <el-form-item label="并发数" prop="frwbfs">
            <el-input v-model="state.formData.frwbfs"></el-input>
          </el-form-item>

          <!-- 优先任务 -->
          <el-form-item class="fullwidth" label="优先任务" prop="frwyx">
            <el-radio-group v-model="state.formData.frwyx">
              <el-radio :label="1">否</el-radio>
              <el-radio :label="2" style="margin-right: 10px">是</el-radio>
            </el-radio-group>
            <el-popover placement="top-start" effect="dark" :width="300" trigger="hover"
                        content="如设定为优先任务，导入号码后会优先将非优先任务的并发数也分配至该任务进行外呼。
                                 如多个优先任务，会按设置的并发数比例进行分配。">
              <template #reference>
                <el-icon>
                  <QuestionFilled/>
                </el-icon>
              </template>
            </el-popover>
          </el-form-item>

          <!-- 启动方式 -->
          <el-form-item label="启动方式" prop="frwqdfs">
            <el-radio-group v-model="state.formData.frwqdfs">
              <el-radio-button :label="0">立即启动</el-radio-button>
              <el-radio-button :label="1" style="margin-right: 10px">定时启动</el-radio-button>
            </el-radio-group>
            <el-popover placement="top-start" effect="dark" :width="300" trigger="hover"
                        content="选择定时启动，系统自动根据设定的时间启动任务。选择立即启动，则任务创建成功会立即启动。">
              <template #reference>
                <el-icon>
                  <QuestionFilled/>
                </el-icon>
              </template>
            </el-popover>
          </el-form-item>
<!--          <el-form-item v-if="state.formData.frwqdfs === 1" class="fullwidth" label="启动日期" prop="frwksrq">-->
<!--            <el-date-picker v-model="state.formData.frwksrq" :disabled-date="disabledDate" placeholder="请选择启动日期"-->
<!--                            type="date"></el-date-picker>-->
<!--          </el-form-item>-->

          <el-form-item v-if="state.formData.frwqdfs === 1" class="fullwidth" label="启动时间">
            <el-date-picker
              v-model="datetimeValue"
              :disabled-date="disabledDate"
              placeholder="请选择启动时间"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>

          <!-- 外呼时间 -->
          <el-form-item label="外呼时间" prop="frwwhweek">
            <el-checkbox-group v-model="state.formData.frwwhweek">
              <el-checkbox :label="1">周一</el-checkbox>
              <el-checkbox :label="2">周二</el-checkbox>
              <el-checkbox :label="3">周三</el-checkbox>
              <el-checkbox :label="4">周四</el-checkbox>
              <el-checkbox :label="5">周五</el-checkbox>
              <el-checkbox :label="6">周六</el-checkbox>
              <el-checkbox :label="7">周日</el-checkbox>
            </el-checkbox-group>
            <div>
              <div v-for="(timeRange, index) in timeRanges" :key="index" class="slider-demo-block">
                <el-slider v-model="timeRange.value" :format-tooltip="formatTime" :max="48" range show-stops/>
                <span>{{ formatTime(timeRange.value[0]) }}</span>
                <span>-</span>
                <span>{{ formatTime(timeRange.value[1]) }}</span>
                <span v-if="index === 0" style="margin-left: 5px;margin-bottom:8px;font-size: 25px"
                      @click="addTimeRange">+</span>
                <span v-if="index > 0" style="margin-left: 8px;margin-bottom:6px;font-size: 30px"
                      @click="deleteTimeRange(index)">-</span>
              </div>
            </div>
          </el-form-item>

          <!-- 未接重呼 -->
          <el-form-item class="fullwidth" label="未接重呼" prop="fwjch">
            <el-switch
                v-model="state.formData.fwjch"
                :active-value="1"
                :inactive-value="0"
                style="margin-right: 10px"
            />
            <el-popover placement="top-start"  effect="dark" :width="400" trigger="hover"
                        content="针对当天外呼后未接听、占线、拒接、挂机、无法接通、用户欠费、线路故障、呼叫失败状态的号码，
                                 会按以下规则重呼： 间隔重呼：按设定的间隔重呼，直至接通或达到设定的重呼次数后不再重呼：
                                 定时重呼：到达设定的时间后自动重呼，直至接通或达到最设定的最后重呼时间后不再重呼。
                                 注：只在当天对当天相应状态号码重呼">
              <template #reference>
                <el-icon>
                  <QuestionFilled />
                </el-icon>
              </template>
            </el-popover>
            <div v-if="state.formData.fwjch === 1">
              <div v-for="(condition, index) in wjch" :key="index"
                   class="fullwidth" style="background-color: #f2f2f2; margin-top: 10px; padding: 10px;">
                <div style="display: flex; justify-content: space-between; background-color: #ffffff">
                  <span style="margin-left: 10px">
                    <span style="color: rgb(238,135,138);">*</span>
                    条件 {{ index + 1 }}
                  </span>
                  <div>
                    <span v-if="index > 0" link style="color: rgba(218,40,40,0.94);margin-right: 10px"
                          @click="removeCondition(index)"> - 删除条件</span>
                    <span v-if="index === 0" link style="color: rgb(45,147,252);margin-right: 10px"
                          @click="addCondition"> + 添加条件</span>
                  </div>
                </div>
                <el-checkbox-group v-model="condition.checkedOptions">

                  <el-checkbox
                      v-for="option in wjchoptions"
                      :key="option"
                      :disabled="isOptionDisabled(option, index)"
                      :label="option"
                  ></el-checkbox>
                </el-checkbox-group>
                <div v-for="(repeatRule,ruleIndex) in condition.repeatRules" :key="ruleIndex">
                  <div style="display: flex;margin-bottom: 5px">
                    <span style="width: 100px">第{{ ruleIndex + 1 }}次重呼</span>
                    <el-select v-model="repeatRule.repeatType" placeholder="请选择方式" style="width: 100px">
                      <el-option label="间隔" value="interval"></el-option>
                      <el-option label="定时" value="timing"></el-option>
                    </el-select>
                    <div v-if="repeatRule.repeatType === 'interval'">
                      <el-input v-model="repeatRule.interval" placeholder="请输入" style="width: 130px;margin-left: 5px;">
                        <template #suffix>
                          <span style="margin-left: 5px;">分钟</span>
                        </template>
                      </el-input>
                      后
                    </div>
                    <el-time-select
                        v-if="repeatRule.repeatType === 'timing'"
                        v-model="repeatRule.timing"
                        start="00:00"
                        step="00:30"
                        end="23:30"
                        placeholder="请选择"
                        style="width: 150px;margin-left: 5px"
                    />

                    <el-button v-if="ruleIndex > 0" style="margin-left: 5px;"
                               @click="removeRepeatRule(condition, ruleIndex)">-
                    </el-button>
                    <el-button v-if="ruleIndex === 0" style="margin-left: 5px" @click="addRepeatRule(condition)">+
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>

          <!-- 接通重呼 -->
          <el-form-item class="fullwidth" label="接通重呼" prop="fjtch">
            <el-radio-group v-model="state.formData.fjtch">
              <el-radio :label="1">不重呼</el-radio>
              <el-radio :label="2">间隔重呼</el-radio>
              <el-radio :label="3" style="margin-right: 10px">定时重呼</el-radio>
            </el-radio-group>
            <el-popover placement="top-start"  effect="dark" :width="400" trigger="hover"
                        content="已接通，但用户无回复或用户所有回复都无法识别时，视为无效接通。
                                 如设定重呼，会将无效接通号码自动导入1条新数据进行外呼，计费。">
              <template #reference>
                <el-icon>
                  <QuestionFilled />
                </el-icon>
              </template>
            </el-popover>

            <div v-if="state.formData.fjtch === 2">
              <div style="margin-left: 10px;display: inline-block">
                <span style="color: rgb(238,135,138);">*</span> 重呼条件
                <el-checkbox-group v-model="ch.checkedOptions">
                  <el-checkbox
                      v-for="option in choptions"
                      :key="option"
                      :label="option"
                  >
                  </el-checkbox>
                </el-checkbox-group>
              </div>

              <el-form ref="chFormRef" :model="ch" :rules="chFormRules" label-width="150px">
                <div>
                  <el-form-item label="重呼间隔" prop="interval" style="margin-left: 10px">
                    <el-input v-model="ch.interval" style="width: 100px;margin-left: -80px;margin-right: 5px"></el-input>分钟
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="重呼次数" prop="times" style="margin-left: 10px">
                    <el-input v-model="ch.times" style="width: 100px;margin-left: -80px"></el-input>
                  </el-form-item>
                </div>
              </el-form>
            </div>


            <div v-if="state.formData.fjtch === 3">
              <div style="margin-left: 10px;display: inline-block">
                <span style="color: rgb(238,135,138);">*</span> 重呼条件
                <el-checkbox-group v-model="ch.checkedOptions">
                  <el-checkbox
                      v-for="option in choptions"
                      :key="option"
                      :label="option"
                  >
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <div>
                <span style="margin-left: 10px">
                  <span style="color: rgb(238,135,138);">*</span> 重呼时间
                  <el-time-select
                      v-model="ch.timing"
                      start="00:00"
                      step="00:30"
                      end="23:30"
                      placeholder="请选择"
                      style="width: 150px;margin-left: 10px"
                  />
                </span>
              </div>
            </div>

          </el-form-item>

          <!-- 发送挂机短信 -->
          <el-form-item class="fullwidth" label="发送挂机短信" prop="fgjdx">
            <el-radio-group v-model="state.formData.fgjdx">
              <el-radio :label="1">不发送</el-radio>
              <el-radio :label="2">普通挂机短信</el-radio>
              <el-radio :label="3">交互挂机短信</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-if="state.formData.fgjdx === 2">
            <el-form-item label="失败重发" prop="sbcf">
              <el-radio-group v-model="gjdx.wjch">
                <el-radio :label="1">否</el-radio>
                <el-radio :label="2">是</el-radio>
              </el-radio-group>
            </el-form-item>
            <div v-if=" gjdx.wjch === 1" style="margin-left: 80px">
              <div v-for="(task,index) in gjdx.tasks" :key="index">
                <div>
                  <span style="margin-left: 10px">
                  <span style="color: rgb(238,135,138);">*</span>
                  短信模板 {{ index + 1 }}
                  </span>
                  <el-select v-model="task.dxmb" placeholder="请选择短信模板" style="margin-left: 10px"
                             @visible-change="fetchSms">
                    <el-option
                        v-for="item in sms"
                        :key="item.fid"
                        :label="item.fmbmc"
                        :value="item.fid">
                    </el-option>
                  </el-select>
                  <el-button v-if="index === 0" type="primary" @click="addSms">添加模板</el-button>
                  <el-button v-if="index > 0" type="danger" @click="removeSms">删除模板</el-button>
                  <div v-for="(condition,conditionIndex) in task.conditions" style="margin-top: 10px">
                    <span style="margin-left: 10px">
                    <span style="color: rgb(238,135,138);">*</span>
                    条件 {{ conditionIndex + 1 }}
                    </span>
                    <el-button v-if="conditionIndex === 0" style="margin-left: 20px;margin-bottom: 6px"
                               @click="addCon(task)"> + 添加条件
                    </el-button>
                    <el-button v-if="conditionIndex > 0" style="margin-left: 20px;margin-bottom: 6px"
                               @click="removeCon(task,conditionIndex)"> - 删除条件
                    </el-button>

                    <div style="display: flex; flex-direction: column; align-items: flex-start;">
                      <div v-for="(label,labelIndex) in condition.labels"
                           class="linked-label"
                           style="margin-left: 80px;display: flex; align-items: center;">
                        <el-select v-model="label.type" placeholder="请选择" style="width: 115px;">
                          <el-option label="意向标签" value="yxbq"></el-option>
                          <el-option label="个性标签" value="gxbq"></el-option>
                          <el-option label="回复关键词" value="hfgjc"></el-option>
                          <el-option label="通话时长" value="thsc"></el-option>
                          <el-option label="外呼次数" value="whcs"></el-option>
                        </el-select>
                        <span v-if="label.type === 'yxbq'">
                        <el-checkbox-group v-model="label.yxbq">
                          <el-checkbox-button
                              v-for="option in intentionOptions"
                              :key="option"
                              :label="option">
                          </el-checkbox-button>
                        </el-checkbox-group>
                      </span>
                        <span v-if="label.type === 'gxbq'">
                        <el-select v-model="label.gxbq" placeholder="请选择"
                                   @visible-change="fetchTemplates">
                          <el-option
                              v-for="item in templates"
                              :key="item.fid"
                              :label="item.name"
                              :value="item.fid">
                          </el-option>
                        </el-select>
                      </span>
                        <span v-if="label.type === 'hfgjc'">
                         <el-input
                             v-model="label.hfgjc"
                             :maxlength="2000"
                             :rows="3"
                             :show-word-limit="true"
                             placeholder="输入关键词，多个关键词使用#分割，最多可输入2000字"
                             style="width: 300px"
                             type="textarea"
                         />
                      </span>
                        <span v-if="label.type === 'thsc'">
                          <el-select v-model="label.thsc.dx" placeholder="请选择" style="width: 100px">
                            <el-option label="<=" value="<="></el-option>
                            <el-option label=">=" value=">="></el-option>
                          </el-select>
                          <el-input-number v-model="label.thsc.time" :min="0"></el-input-number>
                          <span style="color: #0080ff"> 秒</span>
                      </span>
                        <span v-if="label.type === 'whcs'">
                          <span style="color: #0080ff;margin-left: 5px;margin-right: 5px"> 等于第</span>
                          <el-input-number v-model="label.whcs" :min="0"></el-input-number>
                          <span style="color: #0080ff;margin-left: 5px"> 次</span>
                      </span>
                        <span v-if="labelIndex === 0" style="margin-left: 5px;font-size: 20px"
                              @click="addlabel(condition)">+</span>
                        <span v-if="labelIndex > 0" style="margin-left: 5px;font-size: 20px"
                              @click="removelabel(condition,labelIndex)">-</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if=" gjdx.wjch === 2">
              <span style="color: rgb(238,135,138);">*</span>
              <el-select
                  v-model="state.fssb"
                  multiple
                  placeholder="请选择"
                  style="width: 240px;margin-left: 80px"
              >
                <el-option
                    v-for="item in fssb"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
              <div v-for="(task,index) in gjdx.tasks" :key="index" style="margin-left: 80px">
                <div>
                  <span style="margin-left: 10px">
                  <span style="color: rgb(238,135,138);">*</span>
                  短信模板 {{ index + 1 }}
                  </span>
                  <el-select v-model="task.dxmb" placeholder="请选择短信模板" style="margin-left: 10px"
                             @visible-change="fetchSms">
                    <el-option
                        v-for="item in sms"
                        :key="item.fid"
                        :label="item.fmbmc"
                        :value="item.fid">
                    </el-option>
                  </el-select>
                  <el-button v-if="index === 0" type="primary" @click="addSms">添加模板</el-button>
                  <el-button v-if="index > 0" type="danger" @click="removeSms">删除模板</el-button>
                  <div v-for="(condition,conditionIndex) in task.conditions" style="margin-top: 10px">
                    <span style="margin-left: 10px">
                    <span style="color: rgb(238,135,138);">*</span>
                    条件 {{ conditionIndex + 1 }}
                    </span>
                    <el-button v-if="conditionIndex === 0" style="margin-left: 20px;margin-bottom: 6px"
                               @click="addCon(task)"> + 添加条件
                    </el-button>
                    <el-button v-if="conditionIndex > 0" style="margin-left: 20px;margin-bottom: 6px"
                               @click="removeCon(task,conditionIndex)"> - 删除条件
                    </el-button>

                    <div style="display: flex; flex-direction: column; align-items: flex-start;">
                      <div v-for="(label,labelIndex) in condition.labels"
                           class="linked-label"
                           style="margin-left: 80px;display: flex; align-items: center;">
                        <el-select v-model="label.type" placeholder="请选择" style="width: 115px;">
                          <el-option label="意向标签" value="yxbq"></el-option>
                          <el-option label="个性标签" value="gxbq"></el-option>
                          <el-option label="回复关键词" value="hfgjc"></el-option>
                          <el-option label="通话时长" value="thsc"></el-option>
                          <el-option label="外呼次数" value="whcs"></el-option>
                        </el-select>
                        <span v-if="label.type === 'yxbq'">
                        <el-checkbox-group v-model="label.yxbq">
                          <el-checkbox-button
                              v-for="option in intentionOptions"
                              :key="option"
                              :label="option">
                          </el-checkbox-button>
                        </el-checkbox-group>
                      </span>
                        <span v-if="label.type === 'gxbq'">
                        <el-select v-model="label.gxbq" placeholder="请选择"
                                   @visible-change="fetchTemplates">
                          <el-option
                              v-for="item in templates"
                              :key="item.fid"
                              :label="item.name"
                              :value="item.fid">
                          </el-option>
                        </el-select>
                      </span>
                        <span v-if="label.type === 'hfgjc'">
                         <el-input
                             v-model="label.hfgjc"
                             :maxlength="2000"
                             :rows="3"
                             :show-word-limit="true"
                             placeholder="输入关键词，多个关键词使用#分割，最多可输入2000字"
                             style="width: 300px"
                             type="textarea"
                         />
                      </span>
                        <span v-if="label.type === 'thsc'">
                          <el-select v-model="label.thsc.dx" placeholder="请选择" style="width: 100px">
                            <el-option label="<=" value="<="></el-option>
                            <el-option label=">=" value=">="></el-option>
                          </el-select>
                          <el-input-number v-model="label.thsc.time" :min="0"></el-input-number>
                          <span style="color: #0080ff"> 秒</span>
                      </span>
                        <span v-if="label.type === 'whcs'">
                          <span style="color: #0080ff;margin-left: 5px;margin-right: 5px"> 等于第</span>
                          <el-input-number v-model="label.whcs" :min="0"></el-input-number>
                          <span style="color: #0080ff;margin-left: 5px"> 次</span>
                      </span>
                        <span v-if="labelIndex === 0" style="margin-left: 5px;font-size: 20px"
                              @click="addlabel(condition)">+</span>
                        <span v-if="labelIndex > 0" style="margin-left: 5px;font-size: 20px"
                              @click="removelabel(condition,labelIndex)">-</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="state.formData.fgjdx === 3">
            <el-form-item label="失败重发" prop="sbcf">
              <el-radio-group v-model="gjdx.wjch">
                <el-radio :label="1">否</el-radio>
                <el-radio :label="2">是</el-radio>
              </el-radio-group>
            </el-form-item>
            <div v-if=" gjdx.wjch === 1" style="margin-left: 80px">
              <div v-for="(task,index) in gjdx.tasks" :key="index">
                <div>
                  <span style="margin-left: 10px">
                  <span style="color: rgb(238,135,138);">*</span>
                  短信任务 {{ index + 1 }}
                  </span>
                  <el-select v-model="task.dxmb" placeholder="请选择短信任务" style="margin-left: 10px"
                             @visible-change="fetchSms">
                    <el-option
                        v-for="item in sms"
                        :key="item.fid"
                        :label="item.fmbmc"
                        :value="item.fid">
                    </el-option>
                  </el-select>
                  <el-button v-if="index === 0" type="primary" @click="addSms">添加模板</el-button>
                  <el-button v-if="index > 0" type="danger" @click="removeSms">删除模板</el-button>
                  <div v-for="(condition,conditionIndex) in task.conditions" style="margin-top: 10px">
                    <span style="margin-left: 10px">
                    <span style="color: rgb(238,135,138);">*</span>
                    条件 {{ conditionIndex + 1 }}
                    </span>
                    <el-button v-if="conditionIndex === 0" style="margin-left: 20px;margin-bottom: 6px"
                               @click="addCon(task)"> + 添加条件
                    </el-button>
                    <el-button v-if="conditionIndex > 0" style="margin-left: 20px;margin-bottom: 6px"
                               @click="removeCon(task,conditionIndex)"> - 删除条件
                    </el-button>

                    <div style="display: flex; flex-direction: column; align-items: flex-start;">
                      <div v-for="(label,labelIndex) in condition.labels"
                           class="linked-label"
                           style="margin-left: 80px;display: flex; align-items: center;">
                        <el-select v-model="label.type" placeholder="请选择" style="width: 115px;">
                          <el-option label="意向标签" value="yxbq"></el-option>
                          <el-option label="个性标签" value="gxbq"></el-option>
                          <el-option label="回复关键词" value="hfgjc"></el-option>
                          <el-option label="通话时长" value="thsc"></el-option>
                          <el-option label="外呼次数" value="whcs"></el-option>
                        </el-select>
                        <span v-if="label.type === 'yxbq'">
                        <el-checkbox-group v-model="label.yxbq">
                          <el-checkbox-button
                              v-for="option in intentionOptions"
                              :key="option"
                              :label="option">
                          </el-checkbox-button>
                        </el-checkbox-group>
                      </span>
                        <span v-if="label.type === 'gxbq'">
                        <el-select v-model="label.gxbq" placeholder="请选择"
                                   @visible-change="fetchTemplates">
                          <el-option
                              v-for="item in templates"
                              :key="item.fid"
                              :label="item.name"
                              :value="item.fid">
                          </el-option>
                        </el-select>
                      </span>
                        <span v-if="label.type === 'hfgjc'">
                         <el-input
                             v-model="label.hfgjc"
                             :maxlength="2000"
                             :rows="3"
                             :show-word-limit="true"
                             placeholder="输入关键词，多个关键词使用#分割，最多可输入2000字"
                             style="width: 300px"
                             type="textarea"
                         />
                      </span>
                        <span v-if="label.type === 'thsc'">
                          <el-select v-model="label.thsc.dx" placeholder="请选择" style="width: 100px">
                            <el-option label="<=" value="<="></el-option>
                            <el-option label=">=" value=">="></el-option>
                          </el-select>
                          <el-input-number v-model="label.thsc.time" :min="0"></el-input-number>
                          <span style="color: #0080ff"> 秒</span>
                      </span>
                        <span v-if="label.type === 'whcs'">
                          <span style="color: #0080ff;margin-left: 5px;margin-right: 5px"> 等于第</span>
                          <el-input-number v-model="label.whcs" :min="0"></el-input-number>
                          <span style="color: #0080ff;margin-left: 5px"> 次</span>
                      </span>
                        <span v-if="labelIndex === 0" style="margin-left: 5px;font-size: 20px"
                              @click="addlabel(condition)">+</span>
                        <span v-if="labelIndex > 0" style="margin-left: 5px;font-size: 20px"
                              @click="removelabel(condition,labelIndex)">-</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if=" gjdx.wjch === 2">
              <span style="color: rgb(238,135,138);">*</span>
              <el-select
                  v-model="state.fssb"
                  multiple
                  placeholder="请选择"
                  style="width: 240px;margin-left: 80px"
              >
                <el-option
                    v-for="item in fssb"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
              <div v-for="(task,index) in gjdx.tasks" :key="index" style="margin-left: 80px">
                <div>
                  <span style="margin-left: 10px">
                  <span style="color: rgb(238,135,138);">*</span>
                  短信任务 {{ index + 1 }}
                  </span>
                  <el-select v-model="task.dxmb" placeholder="请选择短信任务" style="margin-left: 10px"
                             @visible-change="fetchSms">
                    <el-option
                        v-for="item in sms"
                        :key="item.fid"
                        :label="item.fmbmc"
                        :value="item.fid">
                    </el-option>
                  </el-select>
                  <el-button v-if="index === 0" type="primary" @click="addSms">添加模板</el-button>
                  <el-button v-if="index > 0" type="danger" @click="removeSms">删除模板</el-button>
                  <div v-for="(condition,conditionIndex) in task.conditions" style="margin-top: 10px">
                    <span style="margin-left: 10px">
                    <span style="color: rgb(238,135,138);">*</span>
                    条件 {{ conditionIndex + 1 }}
                    </span>
                    <el-button v-if="conditionIndex === 0" style="margin-left: 20px;margin-bottom: 6px"
                               @click="addCon(task)"> + 添加条件
                    </el-button>
                    <el-button v-if="conditionIndex > 0" style="margin-left: 20px;margin-bottom: 6px"
                               @click="removeCon(task,conditionIndex)"> - 删除条件
                    </el-button>

                    <div style="display: flex; flex-direction: column; align-items: flex-start;">
                      <div v-for="(label,labelIndex) in condition.labels"
                           class="linked-label"
                           style="margin-left: 80px;display: flex; align-items: center;">
                        <el-select v-model="label.type" placeholder="请选择" style="width: 115px;">
                          <el-option label="意向标签" value="yxbq"></el-option>
                          <el-option label="个性标签" value="gxbq"></el-option>
                          <el-option label="回复关键词" value="hfgjc"></el-option>
                          <el-option label="通话时长" value="thsc"></el-option>
                          <el-option label="外呼次数" value="whcs"></el-option>
                        </el-select>
                        <span v-if="label.type === 'yxbq'">
                        <el-checkbox-group v-model="label.yxbq">
                          <el-checkbox-button
                              v-for="option in intentionOptions"
                              :key="option"
                              :label="option">
                          </el-checkbox-button>
                        </el-checkbox-group>
                      </span>
                        <span v-if="label.type === 'gxbq'">
                        <el-select v-model="label.gxbq" placeholder="请选择"
                                   @visible-change="fetchTemplates">
                          <el-option
                              v-for="item in templates"
                              :key="item.fid"
                              :label="item.name"
                              :value="item.fid">
                          </el-option>
                        </el-select>
                      </span>
                        <span v-if="label.type === 'hfgjc'">
                         <el-input
                             v-model="label.hfgjc"
                             :maxlength="2000"
                             :rows="3"
                             :show-word-limit="true"
                             placeholder="输入关键词，多个关键词使用#分割，最多可输入2000字"
                             style="width: 300px"
                             type="textarea"
                         />
                      </span>
                        <span v-if="label.type === 'thsc'">
                          <el-select v-model="label.thsc.dx" placeholder="请选择" style="width: 100px">
                            <el-option label="<=" value="<="></el-option>
                            <el-option label=">=" value=">="></el-option>
                          </el-select>
                          <el-input-number v-model="label.thsc.time" :min="0"></el-input-number>
                          <span style="color: #0080ff"> 秒</span>
                      </span>
                        <span v-if="label.type === 'whcs'">
                          <span style="color: #0080ff;margin-left: 5px;margin-right: 5px"> 等于第</span>
                          <el-input-number v-model="label.whcs" :min="0"></el-input-number>
                          <span style="color: #0080ff;margin-left: 5px"> 次</span>
                      </span>
                        <span v-if="labelIndex === 0" style="margin-left: 5px;font-size: 20px"
                              @click="addlabel(condition)">+</span>
                        <span v-if="labelIndex > 0" style="margin-left: 5px;font-size: 20px"
                              @click="removelabel(condition,labelIndex)">-</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 分配客户加微 -->
          <el-form-item class="fullwidth" label="分配客户加微" prop="ffpkhwx">
            <el-radio-group v-model="state.formData.ffpkhwx">
              <el-radio :label="0">不分配</el-radio>
              <el-radio :label="1">分配</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-if="state.formData.ffpkhwx === 1" style="margin-left: 80px">
            <span style="margin-left: 15px;margin-right: 20px">
              <span style="color: rgb(238,135,138);">*</span>
              <span style="margin-left: 5px">选择分配</span>
            </span>
            <el-checkbox v-model="khjw.allocation.personal" label="分配至个人微信" size="large"/>
            <el-checkbox v-model="khjw.allocation.TP" label="分配至第三方" size="large"/>

            <div v-for="(rule,index) in khjw.allocationRule" :key="index">
              <div>
                <div v-if="khjw.allocation.personal === true">
                  <span style="margin-left: 10px">
                  <span style="color: rgb(238,135,138);">*</span>
                    选择员工
                  </span>
                  <el-select v-model="rule.staff" placeholder="请选择员工" style="margin-left: 10px"
                             @visible-change="fetchStaff">
                    <el-option
                        v-for="item in staff"
                        :key="item.fid"
                        :label="item.fyhm"
                        :value="item.fid">
                    </el-option>
                  </el-select>
                  <el-button v-if="index === 0" type="primary" @click="addRule">添加分配规则</el-button>
                  <el-button v-if="index > 0" type="danger" @click="removeRule">删除分配规则</el-button>
                </div>


                <div v-for="(condition,conditionIndex) in rule.conditions" style="margin-top: 10px">
                    <span style="margin-left: 10px">
                    <span style="color: rgb(238,135,138);">*</span>
                    条件 {{ conditionIndex + 1 }}
                    </span>
                  <el-button v-if="conditionIndex === 0" style="margin-left: 20px;margin-bottom: 6px"
                             @click="addCon(rule)"> + 添加条件
                  </el-button>
                  <el-button v-if="conditionIndex > 0" style="margin-left: 20px;margin-bottom: 6px"
                             @click="removeCon(rule,conditionIndex)"> - 删除条件
                  </el-button>

                  <div style="display: flex; flex-direction: column; align-items: flex-start;">
                    <div v-for="(label,labelIndex) in condition.labels"
                         class="linked-label"
                         style="margin-left: 80px;display: flex; align-items: center;">
                      <el-select v-model="label.type" placeholder="请选择" style="width: 115px;">
                        <el-option label="意向标签" value="yxbq"></el-option>
                        <el-option label="个性标签" value="gxbq"></el-option>
                        <el-option label="回复关键词" value="hfgjc"></el-option>
                        <el-option label="通话时长" value="thsc"></el-option>
                        <el-option label="外呼次数" value="whcs"></el-option>
                      </el-select>
                      <span v-if="label.type === 'yxbq'">
                        <el-checkbox-group v-model="label.yxbq">
                          <el-checkbox-button
                              v-for="option in intentionOptions"
                              :key="option"
                              :label="option">
                          </el-checkbox-button>
                        </el-checkbox-group>
                      </span>
                      <span v-if="label.type === 'gxbq'">
                        <el-select v-model="label.gxbq" placeholder="请选择"
                                   @visible-change="fetchTemplates">
                          <el-option
                              v-for="item in templates"
                              :key="item.fid"
                              :label="item.name"
                              :value="item.fid">
                          </el-option>
                        </el-select>
                      </span>
                      <span v-if="label.type === 'hfgjc'">
                         <el-input
                             v-model="label.hfgjc"
                             :maxlength="2000"
                             :rows="3"
                             :show-word-limit="true"
                             placeholder="输入关键词，多个关键词使用#分割，最多可输入2000字"
                             style="width: 300px"
                             type="textarea"
                         />
                      </span>
                      <span v-if="label.type === 'thsc'">
                          <el-select v-model="label.thsc.dx" placeholder="请选择" style="width: 100px">
                            <el-option label="<=" value="<="></el-option>
                            <el-option label=">=" value=">="></el-option>
                          </el-select>
                          <el-input-number v-model="label.thsc.time" :min="0"></el-input-number>
                          <span style="color: #0080ff"> 秒</span>
                      </span>
                      <span v-if="label.type === 'whcs'">
                          <span style="color: #0080ff;margin-left: 5px;margin-right: 5px"> 等于第</span>
                          <el-input-number v-model="label.whcs" :min="0"></el-input-number>
                          <span style="color: #0080ff;margin-left: 5px"> 次</span>
                      </span>
                      <span v-if="labelIndex === 0" style="margin-left: 5px;font-size: 20px"
                            @click="addlabel(condition)">+</span>
                      <span v-if="labelIndex > 0" style="margin-left: 5px;font-size: 20px"
                            @click="removelabel(condition,labelIndex)">-</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>


          <!-- 优先外呼-->
          <el-form-item class="fullwidth" label="优先外呼" prop="fyxwh">
            <el-radio-group v-model="state.formData.fyxwh">
              <el-radio :label="1">先导入</el-radio>
              <el-radio :label="2">后导入</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 外呼排序方式 -->
          <el-form-item class="fullwidth" label="外呼排序方式" prop="fyxwh">
            <el-radio-group v-model="state.formData.fwhpxfs">
              <el-radio :label="1">优先首呼数据</el-radio>
              <el-radio :label="2">优先重呼数据</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 号码策略-->
          <el-form-item class="fullwidth" label="外显规则" prop="fwxgz">
            <el-radio-group v-model="state.formData.fwxgz">
              <el-radio :label="1">轮流外显</el-radio>
              <el-radio :label="2">随机外显</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 号码隐藏方式-->
          <el-form-item class="fullwidth" label="号码隐藏方式" prop="fhmycfs">
            <el-radio-group v-model="state.formData.fhmycfs">
              <el-radio :label="1">不隐藏</el-radio>
              <el-radio :label="2">隐藏中间四位</el-radio>
              <el-radio :label="3">隐藏后面四位</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 回调地址 -->
          <el-form-item class="fullwidth" label="回调地址" prop="frwhdjk">
            <el-input v-model="state.formData.frwhdjk" class="partwidth"></el-input>
          </el-form-item>

          <!-- 通话节点回调 -->
          <el-form-item class="fullwidth" label="通话节点回调" prop="fthjdhdjk">
            <el-input v-model="state.formData.fthjdhdjk" class="partwidth"></el-input>
          </el-form-item>

          <!-- 挂机短信回调接口 -->
          <el-form-item class="fullwidth" label="挂机短信回调接口" prop="fgzdxhdjk">
            <el-input v-model="state.formData.fgzdxhdjk" class="partwidth"></el-input>
          </el-form-item>
        </template>
      </div>

      <div style="text-align: center;margin-top: 10px">
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="closeForm">取消</el-button>
        </el-form-item>
      </div>
    </el-form>
  </el-dialog>
</template>


<script setup>
import {ref, reactive, watch, onMounted} from "vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import {QuestionFilled} from "@element-plus/icons-vue";
import {mapState} from "@/utils/mapState";
import {useAccount} from "@/pinia/modules/account";
import dayjs from "dayjs";


const state = reactive(mapState().TaskForm)


//定义表单规则
const formRef = ref(null);
const formVisible = ref(false);
const formRules = ref({
  frwmc: [
    {required: true, message: '请输入任务名称', trigger: 'blur'},
  ],
  fhsmblx: [
    {required: true, message: '请选择AI话术模板', trigger: 'change'},
  ],
  fhsmbid: [
    {required: true, message: '请选择话术模板', trigger: 'change'},
  ],
  frwbfs: [
    {required: true, message: '请输入并发数', trigger: 'blur'},
  ],
  frwyx: [
    {required: true, message: '请选择优先任务', trigger: 'change'},
  ],
  flybfcs: [
    {required: true, message: '请输入播放次数', trigger: 'change'},
  ],
  fbfjgsc: [
    {required: true, message: '请输入播放间隔时长', trigger: 'change'},
  ],
  frwksrq: [
    {required: true, message: '请选择启动日期', trigger: 'change'},
  ],
  'ch.interval': [
    {required: true, message: '请输入间隔时长', trigger: 'submit'}
  ]
});


const chFormRef = ref(null);
const chFormRules = ref({
  interval: [
    {required: true, message: '请输入间隔时长', trigger: 'blur'}
  ],
  times: [
    {required: true, message: '请输入重呼次数', trigger: 'blur'}
  ]
});



let createTastbt=ref(false);


const useraccount=useAccount()
//根据用户级别 给与按钮权限
const parseUserFrom=()=>{
  if(useraccount.userinfo.yhlx===3){
    createTastbt.value=true;
  }
}
onMounted(()=>{
  parseUserFrom();
})

//获取话术模板
let templates = ref([]);
const fetchTemplates = () => {
  request.get("/template/status").then(res => {
    templates.value = res.data
  })
}

//获取短信模板
let sms = ref([]);
const fetchSms = () => {
  request.get("/sms/status").then(res => {
    sms.value = res.data
  })
}

//获取员工
let staff = ref([]);
const fetchStaff = () => {
  request.get("/user/staff").then(res => {
    staff.value = res.data
  })
}

// 定时启动，限制只能选择当天及之后的日期
// const previousDate = new Date(Date.now() - 24*60*60*1000);
const currentDate = new Date();
const previousDate = new Date();
previousDate.setDate(currentDate.getDate() - 1);
const minDate = ref(previousDate);
const disabledDate = (date) => {
  return date < minDate.value;
};



//外呼时间，时间段选择
let timeRanges = ref([
  reactive({
    value: [18, 32]
  })
])
let formatTime = (index) => {
  const hours = String(Math.floor(index / 2))
  const minutes = (index % 2) === 0 ? '00' : '30'
  return hours.padStart(2, '0') + ':' + minutes
}
let addTimeRange = () => {
  timeRanges.value.push(reactive({
    value: [18, 32]
  }))
}
let deleteTimeRange = (index) => {
  timeRanges.value.splice(index, 1)
}


//未接重呼
const wjchoptions = ['未接', '占线', '拒接', '无法接通', '用户欠费', '线路故障', '呼叫失败', '关机', '停机', '改号', '空号', '已拦截', '单日呼叫次数受限'];
let wjch = ref([
  {
    checkedOptions: ['未接', '占线', '无法接通', '用户欠费', '线路故障', '呼叫失败', '关机', '停机', '改号', '空号'],
    repeatRules: [
      {
        repeatType: 'interval',
        interval: '',
        timing: ''
      }
    ]
  }
])
const addCondition = () => {
  wjch.value.push({
    checkedOptions: [],
    repeatRules: [
      {
        repeatType: '',
        interval: '',
        timing: '',
      },
    ]
  })
}
const removeCondition = (index) => {
  wjch.value.splice(index, 1)
}
const addRepeatRule = (condition) => {
  condition.repeatRules.push({
    repeatType: '',
    interval: '',
    timing: ''
  })
}
const removeRepeatRule = (condition, ruleIndex) => {
  condition.repeatRules.splice(ruleIndex, 1)
}
const isOptionDisabled = (option, index) => {
  return wjch.value
      .slice(0, index)
      .flatMap(condition => condition.checkedOptions)
      .includes(option);
};


//接通重呼
const choptions = ['无效接通', '意向A', '意向B', '意向C', '意向D', '意向E']
let ch = ref(
    {
      checkedOptions: [],
      repeatType: '',
      interval: 0,
      times: 0,
      timing: ''
    }
)
//监听接通重呼的选择，如果选择间隔重呼将状态设为interval，如果选择定时重呼将状态设为timing
watch(() => state.formData.fjtch, (Val) => {
  if (Val === 2) {
    ch.value.repeatType = 'interval';
  } else if (Val === 3) {
    ch.value.repeatType = 'timing';
  }
});



//挂机短信 ~
let gjdx = ref({
  wjch: 1,
  tasks: [{
    dxmb: '',
    conditions: [
      {
        labels: [
          {
            type: 'yxbq',
            yxbq: [],
            gxbq: '',
            hfgjc: '',
            thsc: {
              dx: '',
              time: 0
            },
            whcs: 0
          }
        ]
      }
    ]
  }
  ]
})
const addSms = () => {
  gjdx.value.tasks.push({
    dxmb: '',
    conditions: [
      {
        labels: [
          {
            type: 'yxbq',
            yxbq: [],
            gxbq: '',
            hfgjc: '',
            thsc: {
              dx: '',
              time: 0
            },
            whcs: 0
          }
        ]
      }
    ]
  })
}
const removeSms = (index) => {
  gjdx.value.tasks.splice(index, 1)
}
const fssb = ref([{
  value: '发送失败',
  label: '发送失败'
}])


//分配客户加微
const khjw = ref({
  allocation: {
    personal: true,
    TP: false
  },
  allocationRule: [
    {
      staff: null,
      conditions: [
        {
          labels: [
            {
              type: 'yxbq',
              yxbq: [],
              gxbq: '',
              hfgjc: '',
              thsc: {
                dx: '',
                time: 0
              },
              whcs: 0
            }
          ]
        }
      ]
    }
  ]
})

const addRule = () => {
  khjw.value.allocationRule.push({
    staff: null,
    conditions: [
      {
        labels: [
          {
            type: 'yxbq',
            yxbq: [],
            gxbq: '',
            hfgjc: '',
            thsc: {
              dx: '',
              time: 0
            },
            whcs: 0
          }
        ]
      }
    ]
  })
}
const removeRule = (index) => {
  khjw.value.allocationRule.splice(index, 1)
}


//挂机短信和客户加微的条件+标签
const addCon = (task) => {
  task.conditions.push({
    labels: [
      {
        type: 'yxbq',
        yxbq: [],
        gxbq: '',
        hfgjc: '',
        thsc: {
          dx: '',
          time: 0
        },
        whcs: 0
      }
    ]
  })
}
const removeCon = (task, conditionIndex) => {
  task.conditions.splice(conditionIndex, 1)
}
const addlabel = (condition) => {
  condition.labels.push({
    type: '',
    yxbq: [],
    gxbq: '',
    hfgjc: '',
    thsc: {
      dx: '',
      time: 0
    },
    whcs: 0
  })
}
const removelabel = (condition, labelIndex) => {
  condition.labels.splice(labelIndex, 1)
}
const intentionOptions = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'M']


//转接类型弹窗
const handleChange = (value) => {
  if (value === 1 || value === 2) {
    ElMessage("您还未开通呼叫中心功能，如需开通，请联系商务");
    state.formData.fjtzjlx = 0
  }
}

//主方法
//传给父组件
const emit = defineEmits(['formSubmitted']);

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {

      //任务建立人，获取当前用户数据
      // let userString = localStorage.getItem('user');
      // let user = JSON.parse(userString);

      const account = useAccount()
      state.formData.frwjlr = account.userinfo.name;

      // 用|隔开周一至周日
      state.formData.frwwhweek = state.formData.frwwhweek.join("|")

      //用|隔开时间段
      state.formData.frwwhsj = timeRanges.value.map(timeRange => {
        return formatTime(timeRange.value[0]) + '-' + formatTime(timeRange.value[1])
      }).join('|')

      //将未接重呼条件转换为json格式存入F_WJCHTJ
      if (state.formData.fwjch !== 0) {
        state.formData.fwjchtj = JSON.stringify(wjch.value);
      }
      //将重呼条件转换为json格式存入F_JTCHTJ
      if (state.formData.fjtch !== 1) {
        state.formData.fjtchtj = JSON.stringify(ch.value)
      }
      //将发送挂机短信条件转换为json格式存入F_GJDXTJ
      if (state.formData.fgjdx !== 1) {
        state.formData.fgjdxtj = JSON.stringify(gjdx.value)
      }
      //将分配客户加微条件转换为json格式存入F_GJDXTJ
      if (state.formData.ffpkhwx !== 0) {
        state.formData.ffpkhwxtj = JSON.stringify(khjw.value)
      }

        request.post("/task/save", state.formData).then(res => {
            ElMessage.success('保存成功')
            emit('formSubmitted')
        }).catch(error => {
          console.log(error)
          ElMessage.error('保存失败')
        })
        console.log('提交表单');
        closeForm();
      } else {
        ElMessage.warning("表单验证失败")
        console.log('表单验证失败');

      }
      });

};

const CreateTask = () => {
  formVisible.value = true;
};

const closeForm = async () => {
  //重新初始化各类数据
  formRef.value.resetFields();
  state.formData = {
    frwlx: 1,
    frwmc: null,
    fhsmbid: null,
    frwbfs: null,
    frwyx: 1,
    frwqdfs: 0,
    frwwhsj: null,
    frwwhweek: [1, 2, 3, 4, 5, 6, 7],
    fwjch: 0,
    fwjchtj: null,
    fjtch: 1,
    fjtchtj: null,
    fgjdx: 1,
    fgjdxtj: null,
    ffpkhwx: 0,
    ffpkhwxtj: null,
    fjtzjlx: 0,
    priorCall: null,
    frwhdjk: null,
    fthjdhdjk: null,
    fgzdxhdjk: null,
    flybfcs: null,
    fbfjgsc: null,
    fwxgz: 1,
    fhmycfs: 1,
    fhsmblx: 1,
    fyxwh: 1,
    fwhpxfs: 1,
    frwksrq: null,
    frwjlr: null
  }
  datetimeValue.value = null
  templates.value = []; // 重置 templates
  sms.value = [];
  staff.value = []
  state.formData.fhsmbid = null;
  timeRanges.value = [reactive({value: [18, 32]})];
  wjch.value = [{
    checkedOptions: ['未接', '占线', '无法接通', '用户欠费', '线路故障', '呼叫失败', '关机', '停机', '改号', '空号'],
    repeatRules: [
      {
        repeatType: 'interval',
        interval: '',
        timing: ''
      }
    ]
  }];
  ch.value = {
    checkedOptions: [],
    repeatType: '',
    interval: 0,
    times: 0,
    timing: ''
  };
  gjdx.value = {
    wjch: 1,
    tasks: [{
      dxmb: '',
      conditions: [
        {
          labels: [
            {
              type: 'yxbq',
              yxbq: [],
              gxbq: '',
              hfgjc: '',
              thsc: {
                dx: '',
                time: 0
              },
              whcs: 0
            }
          ]
        }
      ]
    }
    ]
  };
  khjw.value = {
    allocation: {
      personal: true,
      TP: false
    },
    allocationRule: [
      {
        staff: null,
        conditions: [
          {
            labels: [
              {
                type: 'yxbq',
                yxbq: [],
                gxbq: '',
                hfgjc: '',
                thsc: {
                  dx: '',
                  time: 0
                },
                whcs: 0
              }
            ]
          }
        ]
      }
    ]
  }
  formVisible.value = false;
};

//编辑部分
const edit = async (row) => {
  // state.formData = row; // 将行数据赋值给表单数据

  //提前获取选项内容
  fetchTemplates();
  fetchSms();
  fetchStaff();

  request.get("/task/findById/" + row.frwid).then(res => {
    state.formData = res.data
    //解析json

    // console.log("+++++++++++++++++")
    // console.log(state.formData)
    // console.log("++++++++++++++++++")
    if (state.formData.frwqdfs === 1 && state.formData.frwksrq && state.formData.fdsqdsj){
      const datetimeString = `${state.formData.frwksrq} ${state.formData.fdsqdsj}`;
      datetimeValue.value = dayjs(datetimeString, 'YYYY-MM-DD HH:mm:ss').toDate();
    }else {
      datetimeValue.value = null;
    }

    state.formData.frwwhweek = state.formData.frwwhweek.split("|").map(s => parseInt(s));
    // 首先，用 "|" 分割字符串得到每个时间段
    let timeRangeStrings = state.formData.frwwhsj.split("|");
    // 将每个时间段的字符串再分割开，并将时间转换回原来的格式
    timeRanges.value = timeRangeStrings.map(timeRangeString => {
      let [start, end] = timeRangeString.split("-").map(timeString => {
        let [hour, minute] = timeString.split(":").map(Number);
        return hour * 2 + (minute === 30 ? 1 : 0);
      });
      return reactive({value: [start, end]});
    });
    //若不为空就解析json
    wjch.value = res.data.fwjchtj ? JSON.parse(res.data.fwjchtj) : wjch.value;
    ch.value = res.data.fjtchtj ? JSON.parse(res.data.fjtchtj) : ch.value;
    gjdx.value = res.data.fgjdxtj ? JSON.parse(res.data.fgjdxtj) : gjdx.value;
    khjw.value = res.data.ffpkhwxtj ? JSON.parse(res.data.ffpkhwxtj) : khjw.value;
  })

  formVisible.value = true;
};

// const handleLaunchTypeChange = (value) => {
  // if (value === 0)
  // {
  //   const currentDate = new Date();
  //   console.log(currentDate)
  //   state.formData.frwksrq = dayjs(currentDate).format('YYYY-MM-DD');
  //   state.formData.fdsqdsj = dayjs(currentDate).format('HH:mm');
  // }
// }

const datetimeValue = ref(null);

watch(() => datetimeValue.value, (newValue) => {
  if (newValue) {
    state.formData.frwksrq = dayjs(newValue).toISOString();
    state.formData.fdsqdsj = dayjs(newValue).format('HH:mm');
  } else {
    state.formData.frwksrq = '';
    state.formData.fdsqdsj = '';
  }
});

defineExpose({edit})


</script>

<style>
.fullwidth {
  width: 100%;
}

.partwidth {
  width: 30%;
}

.slider-demo-block {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
  margin-right: 15px;
  width: 400px;
}

.linked-label {
  display: flex;
  align-items: center;
  padding-left: 10px;
  position: relative;
  border-left: 5px solid #008cff;
}

/*调整表单验证信息的位置至右侧*/
.el-form-item__error {
  position: absolute;
  right: -200px;
  top: 50%;
  left: 110%;
  transform: translateY(-50%);
}
</style>